<template>
  <div class="flex items-center">
    <el-radio v-model="timeRadio" :label="1">立即预报</el-radio>
    <el-radio v-model="timeRadio" :label="2">时间</el-radio>
    <el-input
      v-if="timeRadio === 2"
      class="w-[125px]"
      v-model="deliveryTime"
      type="number"
      :min="0"
      :max="999999"
    >
      <template #append>天</template>
    </el-input>
  </div>
</template>
<script setup>
const props = defineProps({
  value: { type: Object, default: () => ({}) },
})

const timeRadio = ref(1)
const deliveryTime = ref()

const emit = defineEmits(['input'])

watch(
  () => [timeRadio.value, deliveryTime.value],
  val => {
    const [_timeRadio, _deliveryTime] = val || []
    if (!_timeRadio) {
      emit('input', null)
      return
    }
    emit(
      'input',
      val
        ? {
            delivery_time_radio: _timeRadio,
            delivery_time: +_timeRadio === 1 ? 0 : _deliveryTime,
          }
        : null
    )
  }
)

watch(
  () => props.value,
  val => {
    const { delivery_time_radio = 1, delivery_time = '' } = val || {}
    timeRadio.value = delivery_time_radio
    deliveryTime.value = delivery_time
  }
)
</script>
